<template>
    <div class="class1">
        <div>v-bind test</div>
        <p>{{title}}</p>
        <p>{{content}}</p>
        <p>{{num}}</p>
        <p>{{tel}}</p>
        <div class="yellow">
            <slot name="yellow"></slot>
        </div>
        <div class="default">
            <slot>默认的内容只有在组件中没有任何内容时才会显示</slot>
        </div>
        <div class="red">
            <slot name="red"></slot>
        </div>
    </div>
</template>

<script>
import app from './../main'
export default {
    // props: ['title', 'content', 'num'],
    props: {
        title: {
            type: String,
            required: true,
            default() {
                return 'props-title'
            }
        },
        content: {
            type: String
        },
        num: {
            type: Number,
            default: 20
        },
        tel: {
            validator(value) {
                // 返回为 false 时报错
                return value.length == 11
            }
        },
        syncTest: String
    },
    methods: {
       
    },
    data() {
        return {

        }
    },
    mounted() {
        app.$on('busCode', (id) => {
            console.log('busCode---', id)
        })
    },
}
</script>

<style lang="scss" scoped>
.yellow {
    background-color: #ff0;
}
.red{
    background-color: #f00;
}
</style>
